<template>
  <div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <div class="setting">
        <Form inline>
          <h3 v-font="14">咨询员数据归属</h3>
          <p>
            跟进
            <InputNumber
              :min="1"
              :style="style"
              v-if="datalist[0]"
              v-model="datalist[0].config_value"
            >
            </InputNumber>
            <span class="ivu-mr-16">天未访后进入公海,</span>
            分配
            <InputNumber
              :max="10"
              :min="0"
              :style="style"
              v-if="datalist[1]"
              v-model="datalist[1].config_value"
            ></InputNumber
            >次后进入鱼池
          </p>
          <Divider class="ivu-mt-0" />
          <h3 v-font="14">回访员数据归属</h3>
          <p>
            跟进
            <InputNumber
              :min="1"
              :style="style"
              v-if="datalist[2]"
              v-model="datalist[2].config_value"
            >
            </InputNumber>
            <span>天未访后进入鱼池</span>
          </p>
          <Divider class="ivu-mt-0" />
          <h3 v-font="14">鱼池数据</h3>
          <p>
            <FormItem
              label="患者状态为："
              :label-width="100"
              label-position="left"
            >
              <Select
                v-model="datavalue"
                placeholder="请选择患者状态"
                multiple
                clearable
              >
                <Option
                  :value="item.value"
                  :disabled="+item.value === 4 || +item.value === 5"
                  v-for="item in statelist"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </FormItem>
            <span>进入鱼池</span>
          </p>
          <Divider class="ivu-mt-0" />
          <div style="display: flex;">
            <div style="flex: 1;">
              <h3 v-font="14">老患者到诊</h3>
              <p>
                <span style="margin-left: 10px;">自动匹配：</span>
                <Switch v-model="switch1" />
              </p>
            </div>
            <div style="flex: 1;">
              <h3 v-font="14">线索匹配老患者，自动转客户</h3>
              <p>
                <span style="margin-left: 10px;">配置模块：</span>
                <Select
                  v-model="autoModule"
                  v-width="280"
                  multiple
                  clearable
                  :max-tag-count="2"
                >
                  <Option
                    v-for="item in autoModuleList"
                    :value="item.values"
                    :key="item.value"
                    >{{ item.label }}</Option
                  >
                </Select>
              </p>
            </div>
          </div>
          <Button
            v-hasC="{
              name: 'automation-flow-update-flow',
              flag: 'v1/automation/flow/update-flow',
            }"
            type="primary"
            size="large"
            @click="confirm"
            :loading="remarksloading"
            >保存</Button
          >
        </Form>
      </div>
    </Card>
  </div>
</template>

<script>
import {
  automationflowindex,
  automationflowupdateflow,
} from "@/api/hqapi/indexone.js";
export default {
  name: "flowSetup",
  data() {
    return {
      autoModuleList: [],
      autoModule: [],
      value: null,
      post: "",
      state: "",
      post1: "",
      remarksloading: false,
      style: { width: "80px", margin: "0 10px" },
      value1: null,
      value2: null,
      statelist: [],
      datalist: [],
      datavalue: [],
      switch1: false,
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    initial() {
      this.askData();
    },
    askData() {
      automationflowindex().then((res) => {
        this.statelist = res.patient_status;
        this.autoModuleList = res.clue_list.map((ee) => {
          return {
            ...ee,
            values: String(ee.value),
          };
        });
        res.data[0].config_value = parseInt(res.data[0].config_value) || null;
        res.data[1].config_value = parseInt(res.data[1].config_value) || null;
        res.data[2].config_value = parseInt(res.data[2].config_value) || null;
        this.datavalue = res.data[3].config_value;
        this.autoModule = res.data[5].config_value;
        this.switch1 = res.data[4].config_value === "1" ? true : false;
        this.datalist = res.data;
      });
    },
    configtext(name, num) {
      let str = "";
      if (name === "config_zxy_public_sea_day") {
        str = `跟进${num}天未到后进入公海,`;
      } else if (name === "config_zxy_fishpond_num") {
        str = `分配${num}次后进入鱼池`;
      } else if (name === "config_hfy_fishpond_day") {
        str = `跟进${num}天未到后进入鱼池`;
      } else if (name === "config_patient_status") {
        str = `患者状态为：${num}进入鱼池`;
      } else if (name === "config_patient_verify") {
        str = `是否自动匹配老患者到诊`;
      } else if (name === "config_clue_sync") {
        str = `匹配模块：${num}`;
      }
      return str;
    },
    confirm() {
      this.$Modal.confirm({
        title: "确认弹窗",
        content: "<p>保存后数据将即时更新，更新后数据将无法返回</p>",
        onOk: () => {
          let show = false;
          for (let item of this.datalist) {
            if (item.config_name === "config_patient_status") {
              if (item.config_value.length !== 0) show = true;
            } else {
              if (item.config_value !== null) show = true;
            }
          }
          if (this.datavalue.length !== 0) show = true;
          if (!show) {
            this.$Message.error("请填写数据");
            return;
          }
          this.datalist[3].config_value = this.datavalue.join(",");
          this.datalist[4].config_value = this.switch1 ? 1 : 0;
          this.datalist[5].config_value = this.autoModule.join(",");
          let list = [];
          for (let item of this.datalist) {
            list.push({
              id: item.id,
              config_name_id: item.config_name_id,
              config_value: item.config_value,
              remark: this.configtext(item.config_name, item.config_value),
            });
          }
          let lists = JSON.stringify(list);
          this.remarksloading = true;
          automationflowupdateflow({ config_info: lists }).then(() => {
            this.$Message.info("保存成功");
            this.remarksloading = false;
            this.initial();
          });
        },
      });
    },
  },
};
</script>

<style scoped>
.setting p {
  line-height: 30px;
  margin: 20px 0;
}

.setting input {
  margin: 0 10px;
}
</style>
